<template>
	<globalModal :title="title" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" :afterClose="close">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off">
				<a-form-item label="分配角色" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<div>
						<div :style="{ borderBottom: '1px solid #E9E9E9' }">
							<a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">全选</a-checkbox>
						</div>
						<a-checkbox-group style="width: 100%;" :options="plainOptions" v-model="checkedList" @change="onChange">
							<a-row>
								<a-col :span="24">
									<span slot="label" slot-scope="{ value }">{{ value }}</span>
								</a-col>
							</a-row>
						</a-checkbox-group>
					</div>
				</a-form-item>
			</a-form>
		</a-spin>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import QS from 'qs';
export default {
	name: 'setUserOrgModal',
	mixins: [ModalMixins],
	data() {
		return {
			indeterminate: true,
			checkAll: false,
			checkedList: [],
			plainOptions: [],
			orgId: ''
		};
	},
	created() {},
	methods: {
		show(record) {
			this.title = '设置机构';
			this.initInfo(record);
		},
		initInfo(record) {
			this.mdl = Object.assign({}, record);
			this.orgId = this.mdl.orgId;
			if (this.plainOptions.length == 0) {
				this.getAllOrg();
			} else {
				this.fillSelectOrg();
			}
			this.visible = true;
		},
		/* 回填选中的机构 */
		fillSelectOrg() {
			if (this.plainOptions.length > 0) {
				let orgIds = this.mdl.orgIds ? this.mdl.orgIds : [];
				console.log('orgIds', orgIds);
				this.checkedList = this.plainOptions.filter(item => orgIds.includes(item.value)).map(item => item.value);
			}
			this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
			this.checkAll = this.checkedList.length === this.plainOptions.length;
		},
		close() {
			this.checkedList = [];
			this.checkAll = false;
			this.indeterminate = true;
			this.confirmLoading = false;
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					/* 处理地址 */
					let parameter = {
						userId: this.mdl.userId,
						orgIds: this.checkedList
					};
					_this.confirmLoading = true;
					this.$postAction(sysManageapi.userUrl.setUserOrg,parameter)
						.then(res => {
							if (res.code == 1) {
								_this.$message.success('保存成功');
								_this.$emit('ok');
								_this.visible = false;
							}
						})
						.catch(() => {
							_this.confirmLoading = false;
						});
				}
			});
		},
		/* 获取所有角色 */
		getAllOrg() {
			this.$postAction(sysManageapi.orgUrl.getAllList).then(da => {
				if (da.code == 1 && da.data.length > 0) {
					this.plainOptions = da.data.map(item => {
						return {
							label: item.orgName,
							value: item.orgId,
						};
					});
				} else {
					this.plainOptions = [];
				}
				this.fillSelectOrg();
			});
		},
		onChange(checkedList) {
			this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
			this.checkAll = checkedList.length === this.plainOptions.length;
		},
		onCheckAllChange(e) {
			Object.assign(this, {
				checkedList: e.target.checked ? this.plainOptions.map(item => item.value) : [],
				indeterminate: false,
				checkAll: e.target.checked
			});
		}
	}
};
</script>

<style scoped lang="less">
/deep/ .ant-checkbox-group-item {
	display: inline-block;
	width: calc(49% - 8px);
}
</style>
